﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>WFS GetFeature接口获取要素</title>
    <link href="../../libs/ol/ol.css" rel="stylesheet" type="text/css" />
    <script src="../../libs/ol/ol.js" type="text/javascript"></script>
    <!--  引入第三方插件库 -->
    <script src="../../libs/jquery-1.11.2.min.js" type="text/javascript"></script>
        <style type="text/css">
        body,html,div,ul,li,iframe,p,img{
            border:none;padding:0;margin:0;
        }
        #map{
            width:100%;
            height:570px;
        }
        #menu{
            width:100%;
            height:20px;         
            padding:5px 0px;
            font-size:14px;
            font-family:"微软雅黑";
            left:10px;    
        }
        #menu ul{
            float:left;
        }
        #menu ul li{
            float:left;
            list-style:none;
            margin:0px 15px; 
        }
    </style>
</head>
<body>
     <div id="menu">
        <ul>
            <li >
                <label class="checkbox" ><input type="checkbox" name="maps" value="wfs"/>arcgisonline WFS</label>
            </li>
        </ul>
    </div> 
    <div id="map" > 
    </div>
    <script type="text/javascript">
        var wfsLayer; //WFS图层数据
        var vectorSource;// 矢量图层数据源

        // 创建ol.format.GeoJSON对象，用来解析 WFS GetFeature接口的响应结果
        var geojsonFormat = new ol.format.GeoJSON();
        //实例化矢量图层数据源对象（使用ajax请求WFS服务）
        vectorSource = new ol.source.Vector({
            loader: function (extent, resolution, projection) {
                //WFS的GetFeature接口访问地址，指定服务回调方法
                var url = 'https://ahocevar.com/geoserver/wfs?service=WFS&' +
                    'version=1.1.0&request=GetFeature&typename=osm:water_areas&' +
                    'outputFormat=application/json' +
                    '&srsname=EPSG:3857&bbox=' + extent.join(',') + ',EPSG:3857';
                // use jsonp: false to prevent jQuery from adding the "callback", parameter to the URL
                //使用jQuery的ajax方法进行请求，使用jsonp方式，设置jsonp参数为false防止jQuery添加“callback”回调方法
                $.ajax({ url: url, dataType: 'json', jsonp: false });
            },
            //加载策略设置
            strategy: ol.loadingstrategy.tile(ol.tilegrid.createXYZ({
                maxZoom: 19
            }))
        });
        /**
        * JSONP WFS 的回调方法（callback）
        * @param {Object} response 响应对象
        */
        window.loadFeatures = function (response) {
            //解析WFS GetFeature接口的响应结果，将解析得到的矢量要素添加到数据源中
            vectorSource.addFeatures(geojsonFormat.readFeatures(response)); 
        };
        //实例化ol.layer.Vector对象加载WFS要素
        wfsLayer = new ol.layer.Vector({
            //数据源（WFS的矢量要素）
            source: vectorSource,
            //矢量要素样式
            style: new ol.style.Style({
                stroke: new ol.style.Stroke({
                    color: 'rgba(0, 0, 255, 1.0)',
                    width: 2
                })
            })
        });

        //实例化Map对象加载地图,默认底图加载OSM地图
        var map = new ol.Map({
            layers: [
                new ol.layer.Tile({
                    source: new ol.source.OSM()
                })
            ],
            target: 'map', //地图容器div的ID
            controls: ol.control.defaults({
                attributionOptions: /** @type {olx.control.AttributionOptions} */({
                    collapsible: false
                })
            }),
            view: new ol.View({
                center: [-8908887.277395891, 5381918.072437216],
                maxZoom: 19,
                zoom: 12
            })
        });

        //通过复选框控制加载与移除WFS服务图层数据
        $("input[name='maps']")[0].onclick = function () {
            if ($("input[name='maps']")[0].checked) {
                map.addLayer(wfsLayer); //加载WFS的矢量要素图层
            }
            else {
                map.removeLayer(wfsLayer); //移除WFS的矢量要素图层
            }
        };

    </script>
</body>
</html>
